<template>
  <div class="image-loader-container">
    <!-- 不删除占位图的原因：JS无法精准控制时间的误差，这样做至少图片不会闪，因此认为删除比较多此一举 -->
    <!-- <img v-if="!isRemove" class="placeholder" :src="placeholder"> -->
    <img class="placeholder" :src="placeholder">
    <!-- <img @load="loadedHandler" class="origin" :src="src" :style="{opacity: originOpacity, transition: `${duration}ms`}"> -->
    <img @load="loadedHandler" class="origin" :src="src" :style="{opacity: originOpacity, transition: `${duration}ms ease-in`}">
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      isLoaded: false, // 原图是否加载完成
      isRemove: false // 是否可以移除占位图,以至于不会留白
    }
  },
  computed: { // 计算属性是变化数据 与 视图状态联系的桥梁
    originOpacity() {
      return this.isLoaded ? 1 : 0
    }
  },
  methods: {
    loadedHandler() {
      console.log('原图加载完成')
      this.isLoaded = true
      setTimeout(() => {
        this.isRemove = true
        this.$emit('load')
      }, this.duration)
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/mixin.less";
.image-loader-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  
  img {
    .self-fill();
  }
  .origin {
    opacity: 0;
  }
  .placeholder {
    filter: blur(1vw);
  }
}
</style>